﻿@model IEnumerable<PhotoVM>
@{
    ViewBag.Title = "Sample";
    int i = 0;
}
@section header{
    <link rel="stylesheet" href="/scripts/lib/jquery/plugins/bxslider/jquery.bxslider.css">
}

<aside class="rightcol rightcol-sample">
    <h3>sample</h3>
    @Html.Action("SampleNav", "menu")   
</aside>
<main class="page-about page-sample">
    <div class="content">
        <div class="slider-container">
            <ul class="bxslider">
                @foreach (var item in Model)
                {
                    <li>
                        <figure>
                            <img src="@item.FullImageUrl" />
                            <figcaption>@item.Title</figcaption>
                        </figure>
                    </li>
                }
      
               
            </ul>
            <span id="slider-prev" class="arrow prev"></span>
            <span id="slider-next" class="arrow next"></span>
        </div>

        <ul id="bx-pager" class="thumbs">
            @foreach (var item in Model)
            {                
                <li>
                    <a data-slide-index="@i" href=""><img src="@item.Thumbnail" /></a>
                </li>
                i++;
            }
        </ul>
    </div>
</main>


@section footer{
    <script src="/scripts/lib/jquery/plugins/bxslider/jquery.bxslider.min.js"></script>
<script>
    $(document).ready(function () {
        $('.bxslider').bxSlider({
            pagerCustom: '#bx-pager',
            nextSelector: '#slider-next',
            prevSelector: '#slider-prev',
            nextText: '<i class="iconfont icon-iconnext"></i>',
            prevText: '<i class="iconfont icon-iconprev"></i>'
        });

        $('.thumbs').bxSlider({
            slideWidth: 176,
            minSlides: 4,
            maxSlides: 7,
            moveSlides: 1,
            infiniteLoop: false,
            slideMargin: 10,
            pager: false
        });
    });
</script>

}
